<template>
	<view>
		<uni-swiper-dot class="swiper-dot" :info="info.list" :current="info.current" :mode="info.mode" :dots-styles="info.dotsStyles">
			<swiper :circular="true" class="topic-swiper" @change="change" :autoplay="true" :interval="3000">
				<block v-for="(item, index) in info.list" :key="index">
					<swiper-item @tap="toTargt(index)"><image :src="item.url" mode="aspectFill" lazy-load></image></swiper-item>
				</block>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
import uniSwiperDot from '../uni-swiper-dot/uni-swiper-dot.vue';
export default {
	components: {
		uniSwiperDot
	},
	props: {
		info: Object
	},
	methods: {
		change(e) {
			this.info.current = e.detail.current;
		},
		// 外连跳转
		toTargt(index) {
			if (this.info.list[index]) {
				uni.navigateTo({
					url: `../xwebview/xwebview?url=${this.info.list[index].target}`
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.swiper-dot {
	border-bottom: 1rpx solid #eeeeee;
	margin-bottom: 15rpx;
}
.topic-swiper {
	padding: 10rpx 20rpx;
	
	image {
		vertical-align: middle;
		border-radius: 20rpx;
		width: 100%;
		height: 300rpx;
	}
}
</style>
